<template>
  <div id="form-container">
    <el-steps :active="active" align-center finish-status="success">
      <el-step title="填写资料"></el-step>
      <el-step title="上传材料"></el-step>
      <el-step title="提交审核"></el-step>
    </el-steps>
    <transition name="slide-fade">
      <el-form v-if="active==1" :model="registerMsg" style="width: 100%;height: 80%;" ref="ruleForm" label-width="100px">

        <el-form-item
            prop="companyName"
            status-icon
            label="公司名称"
            :rules="[
       {required: true,message:'请输入企业名称',trigger:['blur','change']}

              ]"
        >
          <el-input size="small" v-model="registerMsg.companyName" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item
            status-icon
            prop="email"
            label="邮箱"
            :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
        >
          <el-input size="small" placeholder="请输入邮箱" v-model="registerMsg.email"></el-input>
        </el-form-item>

        <el-form-item
            prop="legalPerson"
            status-icon
            label="法人代表"
            :rules="[
       {required: true,message:'请输入法人代表',trigger:['blur','change']}

              ]"
        >
          <el-input size="small" v-model="registerMsg.legalPerson" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item
            prop="address"
            status-icon
            label="地址"
            :rules="[
       {required: true,message:'请选择地址',trigger:['blur','change']}

              ]"
        >
          <el-cascader
              size="small"
              :options="options"
              v-model="registerMsg.address"
              @change="handleChange">
          </el-cascader>
          <el-input style="width: 20vw;margin-left: 10px" size="small" v-model="detailAddress" placeholder="请输入详细地址"></el-input>
        </el-form-item>

        <el-form-item
            status-icon
            prop="legalRegTime"
            label="注册日期"
            :rules="[
      { required: true, message: '请选择日期', trigger: 'blur' }
    ]"
        >
          <el-date-picker  size="small" type="date" placeholder="选择日期" :picker-options="pickerOptions" v-model="registerMsg.legalRegTime" > </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-form-item>
            <!--          <el-button type="primary" @click="submit()">提交</el-button>-->
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button @click="$router.push('/main/login')" type="danger">取消</el-button>
            <el-button @click="active++" style="float: right" type="primary">下一步</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>

      <div v-if="active==2" id="material">
        <div style="display: flex;justify-content:flex-end;width: 66%">
          <el-upload class="upload-demo"
                     drag
                     :data="upMsg"
                     ref="upload"
                     :action="baseUrl+'/file/upload'"
                     multiple
                     name="multipartFiles"
                     :auto-upload="true"
                     :on-error="uploadError"
                     :on-success="uploadSuccess"
          >
            <i  class="el-icon-upload"></i>
            <div  class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div  class="el-upload__tip" slot="tip">请上传图片证明材料</div>
          </el-upload>
        </div>

        <div style="width: 30%;height: 100%;display: flex;justify-content:flex-end;align-items:flex-end;">
          <el-button type="success" @click="upCancel">取消</el-button>
          <el-button @click="active--" type="danger">回退</el-button>
          <el-button @click="submit" style="float: right" type="primary">提交</el-button>
        </div>

      </div>


      <div v-if="active==3" id="success">
        <h2 style="color: orange">提交成功!</h2><br>
        <p style="font-size: 14px;color: olive">审核结果将会通过邮件发送给您</p>
      </div>
    </transition>






  </div>

</template>

<script>
import {companyRegister, upCancelC} from "../../../network/main";
import {CodeToText, regionData} from 'element-china-area-data'
import {Message} from 'element-ui'
import {baseUrl} from "../../../network/baseUrl"
export default {
  name: "regCompany",
  created() {
    this.upMsg.ip=returnCitySN["cip"]
  },
  data() {
    return {
      baseUrl:baseUrl(),
      options:regionData,
      selectedOptions:[],
      active:1,
      detailAddress: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      registerMsg:{
      companyName: '',      //企业名称
      legalPerson: '',      //法人
      legalRegTime: '',     //注册时间
      email:'' ,      //企业邮箱,
      address:'',       //企业地址

      },id:'',
      upMsg:{
        ip:'',
        type:'company'
      }

    };
  },
  methods: {
    //将地址代码数组转换为地址字符串
    getPlace(arr){
      let str=''
      for(let item of arr){
        str+=CodeToText[item]
      }
      return str
    },
    handleChange (value) {
      console.log(value)
    },
    upCancel(){

      upCancelC(returnCitySN["cip"])
          .then(res=>{
            console.log(res)
            this.$router.push("/main/login")
          }).catch(err=>{
        console.log(res)
      })
    },
    uploadSuccess:function(response, file, fileList) {
            Message.success("提交文件成功!")
            console.log(response);
            this.id=response.extend.fileId
            // this.$router.push("/")
        },
      uploadError:function (response, file, fileList) {

            console.log("上传文件失败response" +response);
            console.log("上传文件失败file" +file);
            console.log("上传文件失败fileList" +fileList)
            Message.warning("注册失败~文件上传失败~!")
        this.$router.push("/")
        },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submit(){
      this.registerMsg.address=this.getPlace(this.registerMsg.address)+this.detailAddress
      companyRegister(this.registerMsg,this.id)
      .then(res=>{
        Message.success("提交审核成功!")
        this.active++
        setTimeout(()=>{
          this.$router.push("/main/login")
        },2000)

      })
    }
  }
};
</script>

<style scoped>
#form-container{
  overflow: hidden;
  width: 100%;
  height: 80%;
  box-shadow: 0 2px 4px gray;
  background-color: #fff;
  box-sizing: border-box;
  padding: 30px;
}
p {
  line-height: 30px;
}
#submit{
  position: fixed;
  left: 21%;
  bottom: 15%;
  width: 80px;
}
#success{
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#material{
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: gainsboro 1px dotted;
}
.slide-fade-enter-active {
  transition: all .2s ease;
  transition-delay: .2s;
}

.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */
{
  transform: translateX(20px);
  opacity: 0;
}
</style>
